/* light/dark mode preferences */
:root {
  --bsky-bg: #cbffff;
}

.dark-mode {
    --bsky-bg: rgb(18, 56, 56);
    canvas {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* main components */
.content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "title"
    "onthisday"
    "bluesky"
    "stats";
}
.main-titlebar {
    grid-area: title;
}
.main-statistics {
    grid-area: stats;
}
.main-onthisday {
    grid-area: onthisday;
}
.main-bluesky {
    grid-area: bluesky;
    overflow:scroll;
}
.main-bluesky-container
{
    border-radius: 20px;
    background-color: var(--bsky-bg);
    max-height: 400px;
    overflow: scroll;
    padding: 8px;
}
@media only screen and (min-width: 800px) {
    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "title title"
        "stats onthisday"
        "stats bluesky";
    }
    .main-bluesky-container
    {
        max-height: 800px;
    }
}